<template>
  <div style="display: flex; justify-content: center; width: 100%;flex-direction: column;align-items: center">
    <div style="font-size: 20px; font-weight: bold; width: 100%;margin-bottom: 20px">天梯榜</div>
    <div style="display: flex; justify-content: space-between;width: 100%">
      <div style="border: 1px solid #555;width: 100%;display: flex;justify-content: space-around;align-items: center">
        <img class="occ_icon" :src="getImgUrl('occ_logo','xisuijing')" alt="xs" :class="{active:occChosen === 'xisuijing'}" @click="occChosen ='xisuijing'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','tielaolv')" alt="tl" :class="{active:occChosen === 'tielaolv'}" @click="occChosen ='tielaolv'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','mingzunliuliti')" alt="mz" :class="{active:occChosen === 'mingzunliuliti'}" @click="occChosen ='mingzunliuliti'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','tieguyi')" alt="tg" :class="{active:occChosen === 'tieguyi'}" @click="occChosen ='tieguyi'">
        <el-divider direction="vertical" />
        <img class="occ_icon" :src="getImgUrl('occ_logo','bingxinjue')" alt="bx" :class="{active:occChosen === 'bingxinjue'}" @click="occChosen ='bingxinjue'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','huajianyou')" alt="hj" :class="{active:occChosen === 'huajianyou'}" @click="occChosen ='huajianyou'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','dujing')" alt="dj" :class="{active:occChosen === 'dujing'}" @click="occChosen ='dujing'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','mowen')" alt="mw" :class="{active:occChosen === 'mowen'}" @click="occChosen ='mowen'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','wufang')" alt="wf" :class="{active:occChosen === 'wufang'}" @click="occChosen ='wufang'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','yijinjing')" alt="yj" :class="{active:occChosen === 'yijinjing'}" @click="occChosen ='yijinjing'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','fenyingshengjue')" alt="fy" :class="{active:occChosen === 'fenyingshengjue'}" @click="occChosen ='fenyingshengjue'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','zixiagong')" alt="qc" :class="{active:occChosen === 'zixiagong'}" @click="occChosen ='zixiagong'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','tianluoguidao')" alt="tl" :class="{active:occChosen === 'tianluoguidao'}" @click="occChosen ='tianluoguidao'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','taixuanjing')" alt="yt" :class="{active:occChosen === 'taixuanjing'}" @click="occChosen ='taixuanjing'">
        <el-divider direction="vertical" />
        <img class="occ_icon" :src="getImgUrl('occ_logo','aoxuezhanyi')" alt="ax" :class="{active:occChosen === 'aoxuezhanyi'}" @click="occChosen ='aoxuezhanyi'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','fenshanjin')" alt="fs" :class="{active:occChosen === 'fenshanjin'}" @click="occChosen ='fenshanjin'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','taixujianyi')" alt="jc" :class="{active:occChosen === 'taixujianyi'}" @click="occChosen ='taixujianyi'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','jingyujue')" alt="jy" :class="{active:occChosen === 'jingyujue'}" @click="occChosen ='jingyujue'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','wenshuijue')" alt="cj" :class="{active:occChosen === 'wenshuijue'}" @click="occChosen ='wenshuijue'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','xiaochenjue')" alt="gb" :class="{active:occChosen === 'xiaochenjue'}" @click="occChosen ='xiaochenjue'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','beiaojue')" alt="bd" :class="{active:occChosen === 'beiaojue'}" @click="occChosen ='beiaojue'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','linghaijue')" alt="pl" :class="{active:occChosen === 'linghaijue'}" @click="occChosen ='linghaijue'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','yinlongjue')" alt="lx" :class="{active:occChosen === 'yinlongjue'}" @click="occChosen ='yinlongjue'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','gufengjue')" alt="dz" :class="{active:occChosen === 'gufengjue'}" @click="occChosen ='gufengjue'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','shanhaixinjue')" alt="wlsz" :class="{active:occChosen === 'shanhaixinjue'}" @click="occChosen ='shanhaixinjue'">
        <el-divider direction="vertical" />
        <img class="occ_icon" :src="getImgUrl('occ_logo','yunchangxinjing')" alt="nx" :class="{active:occChosen === 'yunchangxinjing'}" @click="occChosen = 'yunchangxinjing'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','lijingyidao')" alt="nh" :class="{active:occChosen === 'lijingyidao'}" @click="occChosen = 'lijingyidao'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','butianjue')" alt="nd" :class="{active:occChosen === 'butianjue'}" @click="occChosen = 'butianjue'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','xiangzhi')" alt="ng" :class="{active:occChosen === 'xiangzhi'}" @click="occChosen = 'xiangzhi'">
        <img class="occ_icon" :src="getImgUrl('occ_logo','lingsu')" alt="ny" :class="{active:occChosen === 'lingsu'}" @click="occChosen ='lingsu'">
      </div>
    </div>
    <div style="width: 100%; border: 1px solid #555;margin-top: 20px">
      <div style="margin-bottom: 20px;margin-top: 20px;display: flex;justify-content: left;align-items: center">
        <el-select v-model="instance" size="small" style="width:160px;margin-left:20px;margin-right:20px" placeholder="请选择副本">
          <el-option-group label="万灵当歌赛季">
            <el-option label="九老洞（25人英雄）" value="25人英雄九老洞"></el-option>
            <el-option label="九老洞（25人普通）" value="25人普通九老洞"></el-option>
          </el-option-group>
          <el-option-group label="群侠万变赛季">
            <el-option label="武狱黑牢（25人英雄）" value="25人英雄武狱黑牢"></el-option>
            <el-option label="武狱黑牢（25人普通）" value="25人普通武狱黑牢"></el-option>
          </el-option-group>
          <el-option-group label="横刀断浪赛季">
            <el-option label="西津渡（25人英雄）" value="25人英雄西津渡"></el-option>
            <el-option label="西津渡（25人普通）" value="25人普通西津渡"></el-option>
          </el-option-group>
        </el-select>
        <el-select v-model="boss" size="small" style="width:160px" placeholder="请选择首领">
          <el-option v-for="item in bossTable" :label="item" :value="item"></el-option>
        </el-select>
        <template v-if="occChosen">
          <div style="font-size: 12px;margin-left: 20px;margin-right: 20px">排名依据</div>
          <el-select size="small" v-model="requestOrder" style="width: 100px">
            <el-option v-if="occChosen ? occTable[occChosen][2] === 'h': false" label="表现分" value="score"></el-option>
            <el-option label="rDPS" value="rdps"></el-option>
            <el-option label="nDPS" value="ndps"></el-option>
            <el-option label="mrDPS" value="mrdps"></el-option>
            <el-option label="mnDPS" value="mndps"></el-option>
            <el-option v-if="occChosen ? occTable[occChosen][2] !== 'd': false" label="rHPS" value="rhps"></el-option>
          </el-select>
          <div style="font-size: 12px;margin-left: 20px">显示</div>
          <el-radio-group style="margin-left:20px;" v-model="displayData" size="small"
                          v-if="occChosen ? occTable[occChosen][2] === 'h':false">
            <el-radio-button label="score" >表现分</el-radio-button>
            <el-radio-button label="rhps">rHPS</el-radio-button>
            <el-radio-button label="rdps">rDPS</el-radio-button>
            <el-radio-button label="ndps">nDPS</el-radio-button>
            <el-radio-button label="mrdps">mrDPS</el-radio-button>
            <el-radio-button label="mndps">mnDPS</el-radio-button>
          </el-radio-group>
          <el-radio-group style="margin-left:20px;" v-model="displayData" size="small" v-if="occChosen ? occTable[occChosen][2] === 'd':false">
            <el-radio-button label="rdps">rDPS</el-radio-button>
            <el-radio-button label="ndps">nDPS</el-radio-button>
            <el-radio-button label="mrdps">mrDPS</el-radio-button>
            <el-radio-button label="mndps">mnDPS</el-radio-button>
          </el-radio-group>
          <el-radio-group style="margin-left:20px;" v-model="displayData" size="small" v-if="occChosen ? occTable[occChosen][2] === 't':false">
            <el-radio-button label="rdps">rDPS</el-radio-button>
            <el-radio-button label="ndps">nDPS</el-radio-button>
            <el-radio-button label="mrdps">mrDPS</el-radio-button>
            <el-radio-button label="mndps">mnDPS</el-radio-button>
            <el-radio-button label="rhps">rHPS</el-radio-button>
          </el-radio-group>
        </template>
      </div>
      <div style="margin-left: 20px;margin-right: 20px;margin-bottom: 20px">
        <el-table border :data="rankData" stripe style="width: 100%" v-loading="loading">
          <el-table-column align="center" label="排名" type="index" width="55" />
          <el-table-column align="center" label="玩家名称" prop="id">
            <template #default="scope">
              <div style="display: flex;justify-content: center">
                <img :src="getImgUrl('occ_logo',occChosen)" alt="occ" style="height: 24px;width: 24px;margin-right: 5px">
                <div @click="router.push(`/character/${scope.row.server}/${scope.row.id}`)" :class="occChosen">
                  {{ scope.row.id }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="服务器" prop="server" min-width="40" />
          <el-table-column align="center" min-width="40">
            <template #header>
              <div v-if="displayData === 'score'">表现分</div>
              <div v-else-if="displayData === 'rhps'">rHPS</div>
              <div v-else-if="displayData === 'rdps'">rDPS</div>
              <div v-else-if="displayData === 'ndps'">nDPS</div>
              <div v-else-if="displayData === 'mrdps'">mrDPS</div>
              <div v-else-if="displayData === 'mndps'">mnDPS</div>
            </template>
            <template #default="scope">
              <div style="display: flex;justify-content: center">
                <div v-if="displayData === 'score'">{{ scope.row.score }}</div>
                <div v-else-if="displayData === 'rhps'">{{ scope.row.rhps }}</div>
                <div v-else-if="displayData === 'rdps'">{{ scope.row.rdps }}</div>
                <div v-else-if="displayData === 'ndps'">{{ scope.row.ndps }}</div>
                <div v-else-if="displayData === 'mrdps'">{{ scope.row.mrdps }}</div>
                <div v-else-if="displayData === 'mndps'">{{ scope.row.mndps }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="历史排名" min-width="30">
            <template #default="scope">
              <div style="display: flex;justify-content: center">
                <div v-if="displayData === 'score'">
                  <div :class="color(scope.row.scoreRank)">{{ scope.row.scoreRank + '%' }}</div>
                </div>
                <div v-else-if="displayData === 'rhps'">
                  <div :class="color(scope.row.rhpsRank)">{{ scope.row.rhpsRank + '%' }}</div>
                </div>
                <div v-else-if="displayData === 'rdps'">
                  <div :class="color(scope.row.rdpsRank)">{{ scope.row.rdpsRank + '%' }}</div>
                </div>
                <div v-else-if="displayData === 'ndps'">
                  <div :class="color(scope.row.ndpsRank)">{{ scope.row.ndpsRank + '%' }}</div>
                </div>
                <div v-else-if="displayData === 'mrdps'">
                  <div :class="color(scope.row.mrdpsRank)">{{ scope.row.mrdpsRank + '%' }}</div>
                </div>
                <div v-else-if="displayData === 'mndps'">
                  <div :class="color(scope.row.mndpsRank)">{{ scope.row.mndpsRank + '%' }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="战斗时间">
            <template #default="scope">
              <div>{{ timestampToTime(scope.row.battleTime) }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="上传时间">
            <template #default="scope">
              <div>{{ timestampToTime(scope.row.submitTime) }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="复盘版本" prop="edition" min-width="40" />
          <el-table-column align="center" label="战斗概况" min-width="40">
            <template #default="scope">
              <el-button @click="toBattle(scope.row.battleID)" link type="primary">前往查看</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="心法复盘" min-width="40">
            <template #default="scope">
              <el-button @click="toReplay(occChosen, scope.row.shortID)" link type="primary">前往复盘</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :current-page="parseInt(page)" :page-count="pageCount"
                       @update:current-page="pageChange" style="margin-top: 20px" />
      </div>
    </div>
  </div>

</template>

<script setup>
import {computed, watch, ref, toRaw} from 'vue'
import { useRoute,useRouter } from "vue-router";
import axios from 'axios'

const loading = ref(false)

const route = useRoute()
const router = useRouter()

const timestampToTime = (timestamp) => {
  let date = new Date(timestamp * 1000);
  let Y = date.getFullYear() + '-'
  let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
  let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
  let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
  let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
  let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
  return Y+M+D+h+m+s;
}

const color = (score) =>{
  if (score < 25){
    return 'grey'
  }
  else if (score >= 25 && score < 50){
    return 'green'
  }
  else if (score >= 50 && score < 75){
    return 'blue'
  }
  else if (score >= 75 && score < 95){
    return 'purple'
  }
  else if (score >= 95 && score < 98){
    return 'orange'
  }
  else if (score >= 98 && score < 100){
    return 'pink'
  }
  else if (score === 100){
    return 'gold'
  }
  else{
    return 'white'
  }
}

const occTable = {
  'mowen':['cg',0,'d'],
  'xiangzhi':['cg',1,'h'],
  'huajianyou':['wh',0,'d'],
  'lijingyidao':['wh',1,'h'],
  'wufang':['yz',0,'d'],
  'lingsu':['yz',1,'h'],
  'dujing':['wd',0,'d'],
  'butianjue':['wd',1,'h'],
  'bingxinjue':['qx',0,'d'],
  'yunchangxinjing':['qx',1,'h'],
  'mingzunliuliti':['mj',1,'t'],
  'fenyingshengjue':['mj',0,'d'],
  'tielaolv':['tc',1,'t'],
  'aoxuezhanyi':['tc',0,'d'],
  'xisuijing':['sl',1,'t'],
  'yijinjing':['sl',0,'d'],
  'fenshanjin':['cy',0,'d'],
  'tieguyi':['cy',1,'t'],
  'zixiagong':['cyg',0,'d'],
  'taixujianyi':['cyg',1,'d'],
  'jingyujue':['tm',0,'d'],
  'tianluoguidao':['tm',1,'d'],
  'taixuanjing':['yt',0,'d'],
  'wenshuijue':['cj',0,'d'],
  'xiaochenjue':['gb',0,'d'],
  'beiaojue':['bd',0,'d'],
  'linghaijue':['pl',0,'d'],
  'yinlongjue':['lx',0,'d'],
  'gufengjue':['dz',0,'d'],
  'shanhaixinjue':['wlsz',0,'d']
}

const pageCount = ref(1)

const occChosen = ref(route.query.occ)

const changeOcc = (occ) => {
  let newQuery = route.query
  newQuery.occ = occ
  router.push({path:'/ranking', query: newQuery})
}

const toBattle = (id) => {
  router.push(`/battle/${id}`)
}

const toReplay = (occ,id) =>{
  router.push(`/${occ}/${id}`)
}

const getImgUrl = (folder,name) => {
  return new URL(`../assets/${folder}/${name}.png`, import.meta.url).href
}

const bossTable = computed(()=>{
  if (instance.value === '25人英雄九老洞' || instance.value === '25人普通九老洞'){
    return ['魏华','钟不归','岑伤','鬼筹','麒麟','月泉淮']
  }
  else if (instance.value === '25人英雄武狱黑牢' || instance.value === '25人普通武狱黑牢'){
    return ['时风','乐临川','牛波','和正','武云阙','翁幼之']
  }
  else if (instance.value === '25人英雄西津渡' || instance.value === '25人普通西津渡'){
    return ['张景超','刘展','苏凤楼','韩敬青','藤原佑野','李重茂']
  }
})

  // '25人英雄河阳之战':['勒齐那', '阿阁诺', '周通忌', '周贽','常宿'],
  // '25人普通河阳之战':['勒齐那', '阿阁诺', '周通忌', '周贽','常宿'],
  // '25人英雄雷域大泽':['巨型尖吻凤','桑乔','悉达罗摩','尤迦罗摩','月泉淮','乌蒙贵'],
  // '25人普通雷域大泽':['巨型尖吻凤','桑乔','悉达罗摩','尤迦罗摩','月泉淮','乌蒙贵']


const instance = ref(route.query.map)

const boss = ref(route.query.boss)

const page = ref(route.query.page)

const pageChange = (value) => {
  page.value = value
}

const rankData = ref()

const displayData = ref()

const requestOrder = ref('score')

watch(()=>instance.value,(newValue)=>{
  boss.value = ''
})

if (route.query.map && route.query.boss && route.query.occ && route.query.page && route.query.orderby) {
  instance.value = route.query.map
  boss.value = route.query.boss
  occChosen.value = route.query.occ
  page.value = route.query.page
  requestOrder.value = route.query.orderby
  displayData.value = route.query.orderby
  loading.value = true
  axios({
    method:'get',
    url:`http://120.48.95.56:8009/getRank?map=${route.query.map}&boss=${route.query.boss}&occ=${route.query.occ}&page=${route.query.page}&orderby=${route.query.orderby}`
  }).then((res)=>{
    pageCount.value = Math.ceil(res.data.result.num / 50)
    loading.value = false
    let series = []
    for (let i = 0; i < res.data.result.table.length; i++){
      series.push(i)
    }
    rankData.value = res.data.result.table
  })
}

watch(()=>[instance.value,boss.value,occChosen.value,requestOrder.value,page.value],(newValue,oldValue)=>{
  let requestPage
  if(oldValue){
    if (oldValue[4] === newValue[4]){
      requestPage = 1
    }else{
      requestPage = newValue[4]
    }
    let orderBy = newValue[3]
    if (requestOrder.value ==='score' && occTable[occChosen.value][2] != 'h'){
      requestOrder.value = 'rdps'
      orderBy = 'rdps'
    }
    page.value = requestPage
    router.push({
      url:'/ranking',
      query:{
        'map':newValue[0],
        'boss':newValue[1],
        'occ':newValue[2],
        'page':requestPage,
        'orderby':orderBy
      }
    })
  }else{
    if(occChosen.value){
      if (requestOrder.value ==='score' && occTable[occChosen.value][2] != 'h'){
        requestOrder.value = 'rdps'
      }
    }
  }
},{immediate:true})


</script>

<style scoped>
.occ_icon{
  width: 2.5%;
  margin-top: 5px;
  margin-bottom: 5px;
  filter: grayscale(100%);
}
.active{
  filter: grayscale(0);
}
.butianjue,.dujing{
  color: rgb(55,147,255);
  cursor: pointer;
}

.yunchangxinjing,.bingxinjue {
  color:rgb(255, 129, 176);
  cursor: pointer;
}

.lijingyidao,.huajianyou {
  color:rgb(196,152,255);
  cursor: pointer;
}

.xiangzhi,.mowen{
  color:rgb(100,250,180);
  cursor: pointer;
}

.lingsu,.wufang{
  color:rgb(0,172,153);
  cursor: pointer;
}
.xisuijing,.yijinjing{
  color:rgb(255,178,95);
  cursor: pointer;
}
.tielaolv,.aoxuezhanyi{
  color:rgb(255,111,83);
  cursor: pointer;
}
.mingzunliuliti,.fenyingshengjue{
  color:rgb(240,70,96);
  cursor: pointer;
}
.tieguyi,.fenshanjin{
  color:rgb(180,60,0);
  cursor: pointer;
}
.zixiagong,.taixujianyi{
  color:rgb(22,216,216);
  cursor: pointer;
}
.jingyujue,.tianluoguidao{
  color:rgb(121,183,54);
  cursor: pointer;
}
.taixuanjing{
  color:rgb(166,83,251);
  cursor: pointer;
}
.wenshuijue{
  color:rgb(214,249,93);
  cursor: pointer;
}
.xiaochenjue{
  color:rgb(205,133,63);
  cursor: pointer;
}
.beiaojue{
  color:rgb(106,108,189);
  cursor: pointer;
}
.linghaijue{
  color:rgb(171,227,250);
  cursor: pointer;
}
.yinlongjue{
  color:rgb(161,9,34);
  cursor: pointer;
}
.gufengjue{
  color:rgb(107,183,242);
  cursor: pointer;
}
</style>